<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" href="./public/css/bootstrap.min.css">
    <link rel="stylesheet" href="./public/reset.css">
</head>
<body>
    <div class="container">
        <h1>用户列表</h1>
        <div class="center-block mt20">
            <a href="./index.php?c=User&a=index" class="btn btn-info">首页</a>
            <!-- <a href="./index.php?c=User&a=add" class="btn btn-success">添加</a> -->
        </div>
         <div id="addbox">
            <form name="addForm" onsubmit="return addData()">
                姓名: <input type="text" name="name"><br>
                性别:
                    <input type="radio" name="sex" value="0">女
                    <input type="radio" name="sex" value="1">男
                    <input type="radio" name="sex" value="2">保密<br>
                年龄: <input type="text" name="age"><br>
                <button>提交数据</button>
            </form>
        </div>
        <table id="table" class="mt30 table table-hover">
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>省份</th>
                <th>EDIT</th>
            </tr>
            <div id="box"></div>

        </table>
    </div>
    <script>
        loadHtml();
        function loadHtml() {
            // 创建对象
            var xhr = new XMLHttpRequest();
            // 事件回调 xhr
            xhr.onreadystatechange = function (){
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 清空原先的数据
                    box.innerHTML = '';
                    // 获取响应结果
                    var obj = JSON.parse(xhr.responseText);
                    // 遍历表格数据
                    for (var i = 0; i < obj.length; i++) {
                        $('<tr><td>'+obj[i].id+'</td><td>'+obj[i].name+'</td><td>'+obj[i].sex+'</td><td>'+obj[i].age+'</td><td>'+obj[i].province+'</td><td><button id ='+obj[i].id+' onclick ="delData(this)"> 删除</button></td></tr>').appendTo('#table');
                    }
                }
            }
            // 请求的初始化
            xhr.open('get', './p/select.php', true);
            // 正式发送请求
            xhr.send();
        }

        // 删除数据
        function delData(btn) {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function (){
                if (xhr.status == 200 && xhr.readyState == 4) {
                    if (xhr.responseText ==true) {
                        // $("."+id).remove();
                        alert('删除成功o(≧v≦)o~~好棒');
                        // loadHtml();
                        // location.reload(); 
                        $('#'+id).parent().parent().remove();
                    } else {
                        alert('删除失败');
                    }
                }
            }
            var id= btn.id;
            xhr.open('get','./p/del.php?id='+id,true);
            xhr.send();
            return false;
        }

        // 添加数据
        function addData() {
            var name = document.addForm.name.value;
            var sex = document.addForm.sex.value;
            var age = document.addForm.age.value;

            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function (){
                if (xhr.status == 200 && xhr.readyState == 4) {
                    if (xhr.responseText > 0) {
                        alert('添加成功!');
                        var tr = table.insertRow(table.rows.length);
                        tr.insertCell(0).innerHTML = xhr.responseText;
                        tr.insertCell(1).innerHTML = name;
                        tr.insertCell(2).innerHTML = sex;
                        tr.insertCell(3).innerHTML = age;
                        tr.insertCell(4).innerHTML = '';
                    } else {
                        alert('添加失败');
                    }
                }
            }
            xhr.open('post','./p/edit.php',true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send('name='+name+'&sex='+sex+'&age='+age);
            return false;
        }
    </script>

    <script src="./public/js/jquery.min.js"></script>
    <script src="./public/js/bootstrap.min.js"></script>
</body>
</html>